import {Ieditorobj} from "./Ireacttest";
import React, {FC, useEffect, useState} from "react";
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/material.css'
import "codemirror/mode/xml/xml"
import "codemirror/mode/javascript/javascript"
import "codemirror/mode/css/css"
import { Controlled } from 'react-codemirror2'
//  import { fontawesome } from '@fortawesome/react-fontawesome'
// import { faCompressAlt,faExpandAlt } from '@fortawesome/free-solid-svg-icons'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/sql-hint.js';
import 'codemirror/theme/blackboard.css';

import './Editor.css'

export const Editor:FC<Ieditorobj>=props => {
   // const codemirrorRef = React.useRef();
    useEffect(() => {
       // codemirrorRef.current.editor.display.wrapper.style.height = "100px";
    });

    const{
        language,
        displayName,
        value,
        onChange,
        onKeydown
    }=props
    const [open,setOpen] = useState(true)

    const handleChange=(editor:any,data:any,value:any)=>{
        props.onChange(value)
    }

    // className={`editor-container ${open ?'': 'collapsed'}`}
    return <div className={`editor-container ${open ?'': 'collapsed'}`}>
        {/*<div className="editor-title">*/}
        {/*    {displayName}*/}
        {/*    <button*/}
        {/*        type="button"*/}
        {/*        className="expand-collapse-btn"*/}
        {/*        onClick={() =>setOpen(prevOpen=> !prevOpen)}>*/}
        {/*        /!*<fontawesome icon={open? faCompressAlt:*!/*/}
        {/*        /!*    faExpandAlt}/>*!/*/}
        {/*    </button>*/}
        {/*</div   material>*/}
        <Controlled
            onBeforeChange={handleChange}
            value={value}
             className="code-mirror-wrapper"
            onKeyDown={onKeydown}
            options={{
                lineWrapping:true,
                lint: true,
                mode:language,
                theme: displayName,
                lineNumbers:true,

                indentWithTabs: true,

                smartIndent: true,

                styleActiveLine: true,

                matchBrackets: true,

                autofocus: true,

                extraKeys:{"Ctrl": "autocomplete"},
                //ref:{codemirrorRef}


            }}
        />
    </div>
}